<!Doctype html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="../../test-jq/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$(".xx").change(function(){
				this.blur();
				this.focus();
				val = $(this).val();
				if(val == 1){
					$(".xx2").hide();
					$(".xx1").show();
				}
				else if(val == 2){
					$(".xx1").hide();
					$(".xx2").show();
				}
				console.log(val);
			});
		});
		</script>
		<style type="text/css">
.xx1{
	display: block;
	clear: both;
}
.xx2{
	display: none;
	clear: both;
}
.wrap{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -o-box;
	display: box;
	margin:10px;
	border: 1px solid #555;
	min-height: 100px;
	width: 100%;
	text-shadow: none;	
}
.wrapH{
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-ms-box-orient: horizontal;
	-o-box-orient: horizontal;
	box-orient: horizontal;
}
.wrapV{
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-box-orient: vertical;
	-o-box-orient: vertical;
	box-orient: vertical;
}
.wrap3{
	/*-webkit-box-pack: start;*/
}
.wrap4{
	
}
.wrap5{
	
}
.wrap div{
	padding:10px;
	color:#000;
}
.box1{
	background: #fcc;
}
.box2{
	background: #cfc;
}
.box3{
	background: #ccf;
}		
pre{
	margin:0;
	/*width:500px;*/
}
.choice1, .choice2{
	float:left;
}
</style>
	</head>
	<body>
		<div class="choice1">
			<input type="radio" name="xx" class="xx" value="1" checked/>
			<div>
				<pre>
	box-orient:horizontal(default)/vertical;    
	box-pack:start(default)/center/end/justify;
	box-align:start/center/end/baseline/stretch(default);
				</pre>
			</div>
		</div>
		<div class="choice2">
			<input type="radio" name="xx" class="xx" value="2"/>
			<div>
				<pre>
	box-orient:horizontal(default)/vertical;
	box-pack:start(default)/center/end/justify;
	box-align:start/center/end/baseline/stretch(default);
				</pre>
			</div>
		</div>
		<div class="xx1">
			1 box-orient: horizontal;(default)
			<div class="wrap wrapH">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>
			2 box-orient: vertical; 
			<div class="wrap wrapV">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>
			1 box-orient: horizontal; box-pack: start;(default)
			<div class="wrap wrapH" style="-webkit-box-pack: start;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>
			2 box-orient: horizontal; box-pack: center;
			<div class="wrap wrapH" style="-webkit-box-pack: center;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>
			3 box-orient: horizontal; box-pack: end;
			<div class="wrap wrapH" style="-webkit-box-pack: end;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>	
			4 box-orient: horizontal; box-pack: justify;
			<div class="wrap wrapH" style="-webkit-box-pack: justify;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>

			1 box-orient: horizontal; box-align: start;
			<div class="wrap wrapH" style="-webkit-box-align: start;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>
			2 box-orient: horizontal; box-align: center;
			<div class="wrap wrapH" style="-webkit-box-align: center;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>
			3 box-orient: horizontal; box-align: end;
			<div class="wrap wrapH" style="-webkit-box-align: end;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>	
			4 box-orient: horizontal; box-align: baseline;
			<div class="wrap wrapH" style="-webkit-box-align: baseline;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>	
			5 box-orient: horizontal; box-align: stretch;(default)
			<div class="wrap wrapH" style="-webkit-box-align: stretch;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>	
		</div>
		
		<div class="xx2">
			设置弹性盒模型对象的子元素如何分配其剩余空间。<br />
			box-flex:1|1|1
			<div class="wrap wrapH">
			    <div class="box1" style="-webkit-box-flex:1">1</div>
			    <div class="box2" style="-webkit-box-flex:1">2</div>
			    <div class="box3" style="-webkit-box-flex:1">3</div>
			</div>
			box-flex:1|2|3
			<div class="wrap wrapH">
			    <div class="box1" style="-webkit-box-flex:1">1</div>
			    <div class="box2" style="-webkit-box-flex:2">2</div>
			    <div class="box3" style="-webkit-box-flex:3">3</div>
			</div>
			box-flex:1|-|-
			<div class="wrap wrapH">
			    <div class="box1" style="-webkit-box-flex:1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>
			设置弹性盒模型对象的子元素的显示顺序。<br />
			box-ordinal-group:1|3|2
			<div class="wrap wrapH">
			    <div class="box1" style="-webkit-box-ordinal-group:1">1</div>
			    <div class="box2" style="-webkit-box-ordinal-group:3">2</div>
			    <div class="box3" style="-webkit-box-ordinal-group:2">3</div>
			</div>
			box-ordinal-group:3|1|2
			<div class="wrap wrapH">
			    <div class="box1" style="-webkit-box-ordinal-group:3">1</div>
			    <div class="box2" style="-webkit-box-ordinal-group:1">2</div>
			    <div class="box3" style="-webkit-box-ordinal-group:2">3</div>
			</div>
			box-ordinal-group:3|1|1
			<div class="wrap wrapH">
			    <div class="box1" style="-webkit-box-ordinal-group:3">1</div>
			    <div class="box2" style="-webkit-box-ordinal-group:1">2</div>
			    <div class="box3" style="-webkit-box-ordinal-group:1">3</div>
			</div>
			设置弹性盒模型对象的子元素的排列顺序是否反转。<br />
			box-direction:normal(default)
			<div class="wrap wrapH" style="-webkit-box-direction:normal;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>
			box-direction:reverse
			<div class="wrap wrapH" style="-webkit-box-direction:reverse;">
			    <div class="box1">1</div>
			    <div class="box2">2</div>
			    <div class="box3">3</div>
			</div>
		</div>

		
	</body>
</html>